<template>
    <BasicModal
      :title="t('common.editText')"
      :canFullscreen="false"
      @ok="submit"
      @cancel="cancel"
      @register="registerProductModal"
    >
      <BasicForm @register="registerProductForm" />
    </BasicModal>
  </template>
  
  <script lang="ts">
    import { defineComponent } from 'vue';
    import { BasicModal, useModalInner } from '/@/components/Modal';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { updateFormSchema, updateAsync } from './product';
    import { useI18n } from '/@/hooks/web/useI18n';
    export default defineComponent({
      name: 'UpdateProduct',
      components: {
        BasicModal,
        BasicForm,
      },
      emits: ['reload'],
      setup(_, { emit }) {
        const { t } = useI18n();
        const [registerProductForm, { getFieldsValue, setFieldsValue,resetFields }] = useForm({
          labelWidth: 120,
          schemas: updateFormSchema,
          showActionButtonGroup: false,
        });
        const [registerProductModal, { changeOkLoading, closeModal }] = useModalInner((data) => {
          setFieldsValue({
            id: data.record.id,
            productName: data.record.productName,
            productCode: data.record.productCode,
            description: data.record.description,
          });
        });
  
        const submit = async () => {
          try {
            const params = getFieldsValue();
            changeOkLoading(true);
            await updateAsync({ params });
            closeModal();
            emit('reload');
          } finally {
            changeOkLoading(false);
          }
        };
        const cancel = () => {
        resetFields();
        closeModal();
        };
        return {
          registerProductModal,
          registerProductForm,
          submit,
          cancel,
          t,
        };
      },
    });
  </script>
  
  <style lang="less" scoped></style>
  